<template>
	<view class="">
		<navbar :title='title' :back="true" color="#fff" leftIconColor="#fff"></navbar>
		<view style="position: fixed;z-index: 20000;left: 0;width: 100%;padding: 20rpx 0;background-color: #3277fc;" :style="{top:`${rect.bottom+7}px`}">
			<view style="border-radius: 26rpx;">
				<view style="padding: 0 20rpx 20rpx 20rpx;">
					<u-search placeholder="输入会议关键词"  :showAction='false' v-model='page.keyword' borderColor='#3277fc' height='60' bgColor='#fff' color='#000' searchIcon='search' placeholderColor='##a5a5a5' searchIconColor='#a5a5a5'
						@search="search()">
					</u-search>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view style="padding:10rpx 20rpx;" v-if="list.length!=0">
			 <view v-for="(item,index) in list" :key="index" style="margin-top: 20rpx;background-color: #fff;padding: 20rpx;border-radius: 20rpx;" @click="godel(item.id)">
			 	<view style="display: flex;">
			 	   <image :src="item.image" style="width:192rpx;display: block;height: 192rpx;border-radius: 12rpx;"></image>
			 	   <view style="margin-left:20rpx;width: 67%;">
			 		   <view style="color: #000;font-size: 28rpx;width: 412rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;margin-bottom: 10rpx;">{{item.name}}</view>
			 	     <view style="font-size:24rpx;margin-bottom:10rpx;">添加时间 : {{item.addTime}}</view>
			 		  <view style="font-size:24rpx;margin-bottom:10rpx;display: flex;align-items: center;">
						  <view class="">服务商名称:</view>
						  <view style="display: flex;align-items: center;margin-left: 20rpx;">
							  <image :src="item.icon" mode="widthFix" style="width: 60rpx;display: block;margin-right: 10rpx;"></image>
							  <view class="">{{item.serverName}}</view>
						  </view>
					  </view>
					   <view style="font-size:24rpx;width:100%;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">简介 : {{item.msg}}</view>
			 	   </view>
			 	  
			 	</view>
			 </view>
		</view>
		<view class="" v-else>
			<u-empty
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
					:text='`暂无${title}`'
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
    import navbar from '@/components/baseNavbar.vue'
	import {
		getStoreList
	} from "@/api/store.js"
	export default{
		components:{
			navbar
		},
		data(){
			return{
				title:'服务列表',
				list:[],
				loadend: false,
				loading: false,
				page: {
					page: 1,
					limit: 10,
					cateId: '',
					name:''
				},
			}
		},
		onLoad(option){
			this.title = option.title
			if(option.id){
				this.page.cateId = option.id
				this.resetList()
			}
		},
		methods:{
			search(){
				this.resetList()
			},
			godel(id){
				uni.navigateTo({
					url:"/pages/sub/store/serdet?id="+id
				})
			},
			resetList(callback) {
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				let tlist =[]
				getStoreList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list));
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6;
		height: 100%;
	}
</style>